<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib uri="http://shiro.apache.org/tags" prefix="shiro"%>
<!DOCTYPE html>
<html>
<head>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/layui/css/layui.css"media="all" />
</head>
<style>

.filter {
	width: 100%;
	position: relative;
}

.filter label {
	position: absolute;
	right: 10px;
	top: 10px;
	color: #c2c2c2;
}
.caseBoxRecord{
	padding:0px 10px 10px 10px;
	color:#3e3e3e;
	font-size: 14px
}
.caseBoxRecord ul{
	box-shadow: 1px 2px 5px #bdbdbd;
	border-radius: 2%;
	padding:12px;
	background: white;
}
.caseBoxRecord div{
	position:absolute;
	z-index:2;
	width:100%;
	height:100%
}
.smallTitle{
	font-weight: 600;
	color: #616161;
}
.triangle{
	position:absolute;
	display:block;
	width: 0;
    height: 0;
    margin-top: -15px;
    left:-5px;
    z-index: 2;
    border: 15px solid;
    border-color: transparent transparent #ff4949;/* #6ade36; */
    transform:rotate(-45deg);
    -ms-transform:rotate(-45deg); /* Internet Explorer 9*/
    -moz-transform:rotate(-45deg); /* Firefox */
    -webkit-transform:rotate(-45deg); /* Safari 和 Chrome */
    -o-transform:rotate(-45deg); /* Opera */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.online{
	border-color: transparent transparent #6ade36;
}
a{
    color: #007aff;
    font-size:17px;
 }
h4{
	display: inline-block;
	color:#616161;
	font-size:17px;
	font-weight: 600;
    line-height: 2;
}


</style>
<body>
	<div class="conditionChoose"> 
		<input type="hidden" id="compId" value="${compId}">
		<div class="filter selectType">
			<label>用途</label> <select name="interest">
				<c:forEach items="${type }" var="list">
					<option value="${list.kindId }">${list.kindName }(${list.num })</option>
				</c:forEach>
			</select>
		</div>
		<div class="filter selectComp">
			<label>公司</label> <select name="interest" lay-filter="selectComp">
				<option value="-1">全部</option>
				<c:forEach items="${comps }" var="list">
					<option value="${list.compId }">${list.compName }</option>
				</c:forEach>
			</select>
		</div>
	</div> 
	
	<!-- <div id="leg_table"></div> -->
	<!--下拉刷新容器-->
    <div id="pullrefresh" ></div>
        
   <!-- 设置储物柜使用时限权限 -->
	<shiro:hasPermission name="caseUseTime:setUseEndTime">
    	<span class="caseUseTime"></span>
    </shiro:hasPermission>
    
	<script type="text/html" id="stateListBar">
		<a class="mui-btn mui-btn-primary more" value="caseNo">详情</a>
	</script>
	<script type="text/javascript">
    	mui('#offCanvasContentScroll').scroll().scrollTo(0,0);
    	
    	$(".mui-title").html("柜子列表");
    	
		if($("#compId").val()==0){
	    	$(".selectComp").show();
	    }else{
	    	$(".selectComp").hide();
	    }
		
	</script>
	<script type="text/javascript">
		var page = 1;
		var pageData=[];
		var selectFlag = false;
		var typeId = '';
		var compId = '';
		
	 	//用途
		$('.selectType').on('change',function(){
		//判断是否选取prompt属性，无返回值；
	        typeId = $(this).find('option:selected').val();
	        selectFlag = true;
	        page = 1;
	        getInfo();
	        /* stateList = $.legTable({
	        	url:"/main/getCaseList",
	        	where:{
	        		useTypeId:typeId
        		}
        	}); */
		});
		//公司
		$('.selectComp').on('change',function(){
		//判断是否选取prompt属性，无返回值；
	        compId = $(this).find('option:selected').val();
	        selectFlag = true;
	        page = 1;
	        getInfo();
	       /*  stateList = $.legTable({
	        	url:"/main/getCaseList",
	        	where:{
	        		compId:compId
        		}
        	}); */
		});
		
		//接收数据
		/* var stateList = $.legTable({
			limit: 10,			//默认10
			page:1,				//默认1
			id:"#leg_table",	//绑定id
			url:"/main/getCaseList",
			cols:[
				    // {field: 'caseNo', title: 'ID'}, 
				    {field: 'caseNoBuy', title: '位置(储物柜)',templet: function(d){
	            		var str="";
	            		if(isNotNull(d.place)||isNotNull(d.caseNoBuy)){
	            			var str="";
	            			var caseNoBuy="";
	            			if(isNotNull(d.caseNoBuy)){
	            				str="号柜";
	            				caseNoBuy=d.caseNoBuy;
	            			}
	            			return  d.place +'<span style="color:#FF5722;margin-left:6px">'+ caseNoBuy +'</span>'+str 
	            		}else{
	            			return  d.caseNo 
	            		}
	            	}},
		            {field: 'isOnline', title: '在线',templet:function (f){
		            	if(f.isOnline == "是"){
		            		return '<span>是</span>';
		            	}else{
		            		return '<span style="color:red;">否</span>';
		            	}
		            }},
		           //{field: 'isNormal', title: '是否正常'}, 
		            {field: 'boxNumber', title: '门数'},
		            {field: 'useCase', title: '使用情况'},
		            {field: 'switchCase', title: '开关状态'},
		            {field: 'type', title: '类型'},
		            {field: 'useType', title: '用途'},
		            {field: 'compName', title: '所属公司'},
	                {field: 'useEndTime', title: '使用到期时间'},
		            {title: '操作', templet:'#stateListBar'}
	        ]
		}); */
		//空字符串校验
	    function isNotNull(obj){
		    var result = true;
	    	if(obj instanceof Function){
	    		 return result;
	    	}
		    switch (obj) {
		        case undefined:
		        case null:
		            result = false;
		            break;
		    }
		    if(result){
			    if(obj.replace(/\s+/g,"") == ""){//空字符串校验
			            result = false;
		    	}
		    }
		    return result;
		}
		
		
		//详情
		$("#leg_table").on("touchstart", ".table-list .more", function(e){
		 	let i = $(this).parent('data').attr("value");
			let url = "/stateDetails/index?caseNo="+$.data(i).caseNo;
			sessionStorage.setItem("url",url)
			window.location.hash = url;
			sessionStorage.setItem('locker', JSON.stringify($.data(i))); 
	    });
		mui(document).on('tap', '.caseBoxRecord', function(e){
			e.stopPropagation();
			//e.srcElement.style.background = "#bdd7ff"
			var data = pageData[e.srcElement.id];
			let url = "/stateDetails/index?caseNo="+data.caseNo;
			sessionStorage.setItem("url",url)
			window.location.hash = url;
			sessionStorage.setItem('locker', JSON.stringify(data)); 
		});
		
		
		var config = {
			data:[],
			cols:[{field: 'caseNo', title: '',templet: function(d){
        		var str="";
        		if(isNotNull(d.place)||isNotNull(d.caseNoBuy)){
        			var str="";
        			var caseNoBuy="";
        			if(isNotNull(d.caseNoBuy)){
        				str="号柜";
        				caseNoBuy=d.caseNoBuy;
        			}
        			return  d.place +'<span style="color:#FF5722;margin-left:6px">'+ caseNoBuy +'</span>'+str
        		}else{
        			return  d.caseNo
        		}
        		}},
	            {field: 'isOnline', title: '',templet:function (f){
	            	if(f.isOnline == "是"){
	            		return '<span style="color:green;">在线</span>';
	            	}else{
	            		return '<span style="color:red;">不在线</span>';
	            	}
	            }},
	            {field: 'useCase', title: '已使用:'},
	            {field: 'switchCase', title: '已关门:'},
	            {field: 'type', title: '收费类型:'},
	            {field: 'useType', title: '用途:'},
	            {field: 'compName', title: '所属公司:'},
	            {field: 'useEndTime', title: '到期时间:',templet:function (f){
	            	if(isNotNull(f.useEndTime)){
	            		return f.useEndTime.split(" ")[0].replace(/-/g,"/");
	            	}else{
	            		return '';
	            	}
	            }}],
    		runner:function(flag){
    			var data = this.data;
    			var cols = this.cols;
    			if(flag){
					$("#pullrefresh").empty();
    			}
	    		$.each(data,function(i,item1){
	    			var isOnline = '';
	    			if(item1.isOnline == "是"){
	    				isOnline = ' online';
	    			}
	    			var dom = '<div class="caseBoxRecord"><span class="triangle'+isOnline+'"></span><div id='+((page-1)*10+i)+' class="caseNoId"></div><ul class="mui-table-view">'+
					'<li><h4>caseNo</h4><h5 style="float:right">isOnline</h5></li>'+
	    			'<li><font>useType</font></li>';
					if($(".caseUseTime").length > 0){dom = dom + '<li><font>useEndTime</font></li>';}
					dom = dom + '<li><font style="width:55%;display:inline-block;">useCase</font><font>switchCase</font></li>'+
				    			'<li><font style="width:55%;display:inline-block;">compName</font><font>type</font></li>'+
				    			'</ul></div>';
					var elChild;
					for (var j = 0; j < cols.length; j++) {
						var item2 = cols[j];
						var value;
						if(isNotNull(item2.templet)){
							if(item2.templet instanceof Function){
								value = item2.templet(item1);
							}else{
								value = $("#"+item2.templet.replace("#",""))[0].innerHTML;
							}
						}else{
							value = item1[item2.field];
						}
						if(j>=2){
							value = item2.title+'<font class="smallTitle">'+value+'</font>';
						}else if(j == 0){
							dom = dom.replace("caseNoId",item1.caseNo);
						}
						dom = dom.replace(item2.field,value);
					};
	    			$("#pullrefresh").append(dom);
	    			pageData.push(item1);
				});
    	}};
		
		var listenScreenFlag = true;
		var maxScrollYFlag = true;
		var lastScrollVla;
		var scroll = mui('.mui-inner-wrap .mui-scroll-wrapper').scroll(); 
	    document.querySelector('.mui-inner-wrap .mui-scroll-wrapper' ).addEventListener('scroll', function (e){
	    	 if(scroll.y<-50 && listenScreenFlag){
	    		$(".upTop").show();
	    		listenScreenFlag = false;
	    		
	    	}else if(scroll.y >= -50 && !listenScreenFlag){
	    		$(".upTop").hide();
	    		listenScreenFlag = true;
	    	} 
	    	 
	    	if(scroll.y < scroll.maxScrollY && $(".loading").length==0){
	    		$("#pullrefresh").append('<div class="loading">&nbsp;</div>');
	    	}
	    	if((scroll.y+30) < scroll.maxScrollY && maxScrollYFlag){
	    		maxScrollYFlag = false;
	    		$(".loading").text('正在加载...');
	    		setTimeout(function(){
	    			page++;
	    			getInfo();
	    		},1000)
    		}
    	})
	    
	    function getInfo(){
	    	var url = '/main/getCaseList?page='+page;
	    	isNotNull(typeId)?url=url+'&useTypeId='+typeId:1+1;
	    	isNotNull(compId)?url=url+'&compId='+compId:1+1;
	    	//console.log("page:"+page+"  typeId:"+typeId+"  compId:"+compId)
         	$.ajax({ 
	    		url:url, 
	    		type:'get',
	    		dataType:"json",
	    		timeout:10000,
	    		data:{},
	    		success:function(res){
	    			//console.log(res)
	    			$(".loading").remove();
	    			if(res.data.length==0){
	    				$("#pullrefresh").append('<div class="loading">————我也是有底线的————</div>');
	    			}else{
		    			maxScrollYFlag=true;
	    			}
	    			config.data=res.data;
					config.runner(selectFlag);
					selectFlag = false;
	               },
	               error:function(data){
	     	    		console.log("error")
 	    	}});
        }
        getInfo();
 </script>
</body>
</html>















<%-- <%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
</head>
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/pagination.css">
<script src="${pageContext.request.contextPath}/resources/js/pagination.js"></script>
<style>
.filter {
	width: 100%;
	position: relative;
}
/*
.filter label {
	margin: 10px 0px 0px 10px;
	width : 15%;
	float: left;
	width: 15%;
}

.filter select {
	width: 30%;
	float: left;
} */
.filter label {
	position: absolute;
	right: 10px;
	top: 10px;
	color: #c2c2c2;
}
</style>
<body>
	<input type="hidden" id="compId" value="${compId}">
	<div class="filter selectType">
		<label>用途</label> 
		<select name="interest">
			<c:forEach items="${type }" var="list">
				<option value="${list.kindId }">${list.kindName }(${list.num })</option>
			</c:forEach>
		</select>
	</div>
	<div class="filter selectComp">
		<label>公司</label> 
		<select name="interest" lay-filter="selectComp">
			<option value="-1">全部</option>
			<c:forEach items="${comps }" var="list">
				<option value="${list.compId }">${list.compName }</option>
			</c:forEach>
		</select>
	</div>
	<div class="table-list"></div>
	<div class="page pagination" id="pagination"></div>
	<script type="text/javascript">
    	mui('#offCanvasContentScroll').scroll().scrollTo(0,0);
    	
    	$(".mui-title").html("柜子列表");
    	
		if($("#compId").val()==0){
	    	$(".selectComp").show();
	    }else{
	    	$(".selectComp").hide();
	    }
		
		
	</script>
	<script type="text/javascript">
		var data,count;
		var param="";
		var pageNum = 1;
	 	//用途
		$('.selectType').on('change',function(){
		//判断是否选取prompt属性，无返回值；
	        var typeId = $(this).find('option:selected').val();
	        param = "&useTypeId="+typeId;
	        stateList(pageNum+param);
		});
		//公司
		$('.selectComp').on('change',function(){
		//判断是否选取prompt属性，无返回值；
	        var compId = $(this).find('option:selected').val();
	        param = "&compId="+compId;
	        stateList(pageNum+param);
		});
	
		//接收数据
		stateList(1);
		function stateList(page){
			$.get("/main/getCaseList?page="+page, function(res) {
				data = res.data;
				//总数据数
				count = res.count;
				
				//总页数
				pageAll = parseInt(count/10);
				if(count%10){
					pageAll += 1;
				}
				
				$(".table").remove();
			    $(".table-list").append('<div class="table"></div>')

			    no = '<span style="color:red;">否</span>';
			    
			    for(var i=0;i<data.length;i++){
			    	
			    	if(data[i].isOnline ==	"否"){
			    		data[i].isOnline =	no;
			    	}
			    	if(data[i].isNormal ==	"否"){
			    		data[i].isNormal =	no;
			    	}
			    	
				 	 $(".table").append('<ul class="table-temp">'
						    +'<li>ID:<data>'+data[i].caseNo+'</data></li>'
						    +'<li>在线:<data>'+data[i].isOnline+'</data></li>'
						    +'<li>正常:<data>'+data[i].isNormal+'</data></li>'
						    +'<li>门数:<data>'+data[i].boxNumber+'</data></li>'
						    +'<li>使用情况:<data>'+data[i].useCase+'</data></li>'
						    +'<li>开关状态:<data>'+data[i].switchCase+'</data></li>'
						    +'<li>类型:<data>'+data[i].type+'</data></li>'
						    +'<li>用途:<data>'+data[i].useType+'</data></li>'
						    +'<li>公司:<data>'+data[i].compName+'</data></li>'
						    +'<li>'
						   		+'<a class="mui-btn mui-btn-primary more" value="'+i+'">详情</a>'
						    +'</li>'
						    +'</ul>');
				}
	            if(data.length==0){
	            	$(".table").append("<ul><li><h3 style='color: #bbbbbb;'>暂无数据！</h3></li></ul>")
	            }
				
				//分页
				 console.log(pageAll+"="+count+"="+page+"="+param)
				pagination(pageAll,count,page,param)
				
			});
		}
		
		//详情
		$(".table-list").on("touchstart", ".more", function(e){
			let i = $(this).attr("value");
			let url = "/stateDetails/index?caseNo="+data[i].caseNo;
			sessionStorage.setItem("url",url)
			window.location.hash = url;
			sessionStorage.setItem('locker', JSON.stringify(data[i]));
	    });

	</script>
</body>
</html> --%>